import React, { Component } from 'react'
import { HashRouter as Router, Link } from 'react-router-dom'

export default class AvatorShow extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isMouseAvator: false, // 鼠标是否在头像里
            isItemMouse: new Array(2).fill(false)
        }
    }

    // 触摸菜单项背景颜色变化
    handleItemMouseOver = (index) => {
        let isItemMouse = new Array(2).fill(false);
        isItemMouse[index] = true;
        this.setState({
            isItemMouse
        });
    }

    // 触摸菜单项背景颜色变化
    handleItemMouseOut = () => {
        let isItemMouse = new Array(2).fill(false);
        this.setState({
            isItemMouse
        });
    }

    // 处理头像框中阴影触碰
    handleMouseOver = () => {
        this.setState({
            isMouseAvator: true
        });
    }

    handleMouseOut = () => {
        this.setState({
            isMouseAvator: false
        });
    }

    handleExit=()=>{
        this.props.remove_user()
    }

    render() {
        return (
            <div
                style={{
                    float: 'right',
                    height: 60,
                    paddingTop: (this.props.top),
                    paddingLeft: 10,
                    cursor: 'pointer',
                    position: 'relative'
                }}
                className="removeFloat"
                onMouseOver={this.handleMouseOver}
                onMouseOut={this.handleMouseOut}
            >
                <span class="anticonxiala1" style={{
                    fontSize: 20,
                    float: 'right',
                    marginTop: 20,
                    marginLeft: 5,
                    color: 'white'
                }} ></span>
                <img src={this.props.avatorURL} alt="头像" width={48} height={48} style={{
                    borderRadius: '50%',
                    float: 'right',
                    marginTop: 6
                }} />
                <div style={{
                    float: 'right',
                    position: 'absolute',
                    right: "0px",
                    width: 133,
                    top: (this.props.labelTop),
                    backgroundColor: '#fff',
                    borderRadius: 2,
                    boxShadow: '0 0 40px #ccc',
                    display: (this.state.isMouseAvator ? 'block' : 'none'),
                    // display: 'block',
                    zIndex: 99
                }} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
                    <Link to={{
                        pathname: `/my/info`
                    }} style={{
                        height: 50,
                        textAlign: 'center',
                        borderBottom: '1px solid #eee',
                        lineHeight: '50px',
                        color: '#000',
                        display: 'block',
                        backgroundColor: (this.state.isItemMouse[0] ? '#eee' : '#fff')
                    }} onMouseOver={() => this.handleItemMouseOver(0)} onMouseOut={this.handleItemMouseOut}>我的信息</Link>
                    <Link to={{
                        pathname: `/my/message`
                    }} style={{
                        height: 50,
                        textAlign: 'center',
                        lineHeight: '50px',
                        color: '#000',
                        display: 'block',
                        backgroundColor: (this.state.isItemMouse[1] ? '#eee' : '#fff')
                    }} onMouseOver={() => this.handleItemMouseOver(1)} onMouseOut={this.handleItemMouseOut}>我的消息</Link>
                    <Link
                        to='#'
                        style={{
                            height: 50,
                            textAlign: 'center',
                            lineHeight: '50px',
                            color: '#fff',
                            backgroundColor: '#f00',
                            display: 'block',
                        }} onClick={this.handleExit}>退出登录</Link>
                </div>
            </div>
        )
    }
}
